<template>
  <div class="app-container flex-b home">
    <div class="left">
      <div class="index-head">
        <el-card shadow="never">
          <div class="name flex-a">
            <span>{{ user.nickName }}</span>
            <!-- <img src="@/assets/images/code.png" alt=""> -->
          </div>
          <div class="list flex">
            <div>绑定号码：{{ user.userName }}</div>
            <div>到期时间：永久</div>
          </div>
        </el-card>
      </div>
      <div class="data-list flex-b">
        <el-card shadow="never" v-for="(item, index) in list" :key="item.id || index">
          <div class="card-list flex-b flex-a">
            <div class="card-left">
              <div class="name"><span>{{ item.name }}</span>
                <!-- <el-tooltip class="item" effect="dark" :content="item.tip"
                  placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip> -->
              </div>
              <div class="num">{{ item.num || 0 }}</div>
            </div>
            <div class="card-right">
              <div v-if="index == 0"><img src="@/assets/images/order.png" alt=""></div>
              <div v-if="index == 1"><img src="@/assets/images/member.png" alt=""></div>
              <div v-if="index == 2"><img src="@/assets/images/notice.png" alt=""></div>
              <div v-if="index == 3"><img src="@/assets/images/foster.png" alt=""></div>
              <!-- <div class="add"><span :class="'color' + index">较昨日+{{ item.y || 0 }}</span></div> -->
            </div>
          </div>
        </el-card>
      </div>
      <div class="analyse">
        <el-card shadow="never">
          <div class="analyse-head">
            客流分析<el-tooltip class="item" effect="dark" content="默认统计本月的客流分析情况，统计每天客流量中会员与散客各自的数量。" placement="top">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </div>
          <!-- <div class="analyse-title">宠小家宠物店2023-04-01 至 2023-04-07客流分析</div> -->
          <div id="analyse-line" ref="line"></div>
        </el-card>
      </div>
      <div class="data-table flex-b">
        <div class="table-left">
          <el-card shadow="never">
            <div class="table-title">
              <span>订单统计</span>
              <!-- <el-tooltip class="item" effect="dark" content="实时统计微信商城各状态的订单数量。" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip> -->
            </div>
            <div class="table-content">
              <el-card shadow="never" v-for="(item, index) in statusList" :key="item.id || index">
                <div>{{ item.name || '' }}</div>
                <div class="num"><span>{{ item.num || 0 }}</span>单</div>
              </el-card>
            </div>
          </el-card>
        </div>
        <div class="table-right">
          <el-card shadow="never">
            <div class="stock-title flex-b">
              <div>库存不足</div>
              <div><span @click="jumpTo">查看更多</span></div>
            </div>
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="name" label="商品名称">
              </el-table-column>
              <el-table-column prop="brand" label="规格">
              </el-table-column>
              <el-table-column prop="alter" label="当前库存">
              </el-table-column>
            </el-table>
          </el-card>
        </div>
      </div>
    </div>
    <!-- <div class="right">
      <div class="banner">
        <el-calendar v-model="value">
        </el-calendar>
      </div>
      <el-card shadow="never">
        <div class="news">
          <div class="tab-list flex">
            <div :class="tab == 1 ? 'active item' : 'item'" @click="changeTab(1)">
              <span>公告通知</span>
              <i></i>
            </div>
            <div :class="tab == 2 ? 'active item' : 'item'" @click="changeTab(2)">
              <span>行业资讯</span>
              <i></i>
            </div>
          </div>
          <div class="news-list">
            <div v-for="item in news" :key="item.id" class="news-item">
              <div class="item-title">{{ item.title }}</div>
              <div class="item-time">{{ item.time }}</div>
            </div>
          </div>
        </div>
      </el-card>
    </div> -->
    <!-- 公告通知弹窗 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="40%" class="center news-dialog">
      <div class="content">
        尊敬的宠老板用户：
        为了提高宠老板系统服务器的安全性，我们将于15日凌晨1点(今晚)对系统Web防火墙进行升级，将原本的V2.0升级至全新的V3.0版本。此次升级将提升更强的系统安全性能，以便在后续可以帮助您更好的保护数据安全。
        在此过程中，可能有1小时左右服务中断，我们将尽快完成升级，并尽一切可能减少升级期间的影响。
        宠老板承诺将为您提供最优质的服务和系统安全性。感谢您一如既往对宠老板的支持和信任。
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="btn" style="padding: 12px 60px;" @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getMap, getLine, getProdInfo, getWeChat } from '@/api/pet/index'
import { getInfo } from '@/api/login'
import * as echarts from 'echarts';
export default {
  name: "Index",
  data() {
    return {
      value: new Date(),
      dialogVisible: false,
      title: '宠老板系统安全性能升级通知！',
      list: [],
      statusList: [],
      tableData: [],
      tab: 1,
      user: {},
      news: [
        {
          title: '宠老板系统安全性能升级通知！',
          time: '2023-02-14 15:11'
        },
        {
          title: '宠老板系统安全性能升级通知！',
          time: '2023-02-14 15:11'
        },
        {
          title: '宠老板系统安全性能升级通知！',
          time: '2023-02-14 15:11'
        },
        {
          title: '宠老板系统安全性能升级通知！',
          time: '2023-02-14 15:11'
        },
        {
          title: '宠老板系统安全性能升级通知！',
          time: '2023-02-14 15:11'
        },
        {
          title: '宠老板系统安全性能升级通知！',
          time: '2023-02-14 15:11'
        },
        {
          title: '宠老板系统安全性能升级通知！',
          time: '2023-02-14 15:11'
        },
        {
          title: '宠老板系统安全性能升级通知！',
          time: '2023-02-14 15:11'
        },
        {
          title: '宠老板系统安全性能升级通知！',
          time: '2023-02-14 15:11'
        }
      ]
    };
  },
  created() {
    getMap().then(res => {
      if (res.code == 200) {
        this.list = res.data
      }
    })
    getWeChat().then(res => {
      if (res.code == 200) {
        this.statusList = res.data
      }
    })
    getProdInfo().then(res => {
      if (res.code == 200) {
        this.tableData = res.data
      }
    })
    getInfo().then(res => {
      if (res.code == 200) {
        this.user = res.user
        console.log(res.user)
      }
    })
  },
  mounted() {
    this.drawLine()
  },
  methods: {
    changeTab(n) {
      this.tab = n
    },
    jumpTo() {
      this.$router.push({ path: '/stock/proStock' })
    },
    drawLine() {
      getLine().then(res => {
        if (res.code == 200) {
          var option, legend = [], data = res.data.series
          data.forEach(item => {
            legend.push(item.name)
          })
          option = {
            title: {
              text: ''
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: legend
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              data: res.data.xAxis
            },
            yAxis: {
              type: 'value'
            },
            series: res.data.series
          };
          var myChart = echarts.init(this.$refs.line);
          option && myChart.setOption(option);
        }
      })
    },
  }
};
</script>

<style scoped lang="scss">
.app-container {
  .el-card {
    border-radius: 20px;
  }

  .left {
    width: 100%;

    .index-head {

      .name {
        color: #333336;
        font-weight: bold;
        font-size: 18px;
        font-family: PingFang;
        margin-bottom: 15px;

        img {
          width: 20px;
          height: 20px;
          margin-left: 10px;
        }
      }

      .list {
        div {
          float: left;
          width: 20%;
          font-size: 13px;
          color: #333336;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }

    .data-list {
      margin: 15px 0;

      .el-card {
        width: 24.2%;
      }

      .card-list {
        .card-left {
          .name {
            color: #39393c;
            font-size: 14px;

            span {
              margin-right: 5px;
            }
          }

          .num {
            margin-top: 40px;
            color: #333336;
            font-size: 24px;
            font-weight: bold;
          }
        }

        .card-right {
          img {
            width: 85%;
          }

          .add {
            text-align: center;
            font-size: 12px;
            margin-top: 5px;

            .color0 {
              color: #268cf1;
            }

            .color1 {
              color: #ff6b7d;
            }

            .color2 {
              color: #ff9017;
            }

            .color3 {
              color: #3ec906;
            }
          }
        }
      }
    }

    .analyse {
      margin-bottom: 15px;

      .analyse-head {
        color: #333336;
        font-weight: bold;
        font-size: 15px;
      }

      .analyse-title {
        text-align: center;
        font-size: 14px;
        margin-top: 15px;
      }

      #analyse-line {
        width: 100%;
        height: 400px;
        margin-top: 20px;
      }
    }

    .data-table {
      height: 300px;

      .table-left {
        width: 40%;
        height: 100%;

        .table-title {
          margin-bottom: 15px;
          color: #333336;
          font-weight: bold;
          font-size: 15px;

          span {
            margin-right: 5px;
          }
        }

        .table-content {
          font-size: 16px;
          color: #333336;

          .el-card {
            display: inline-block;
            width: 48%;
            height: 92px;
            border-radius: 5px;
            margin-bottom: 15px;
          }

          .el-card:nth-child(odd) {
            margin-right: 4%;
          }

          .num {
            margin-top: 10px;

            span {
              font-weight: bold;
              margin-right: 10px;
              font-size: 18px;
            }
          }
        }
      }

      .table-right {
        width: 59%;
        height: 100%;

        .el-card {
          height: 100%;
          box-sizing: border-box;
        }

        .stock-title {
          color: #333336;
          font-weight: bold;
          font-size: 15px;

          span {
            border: 1px solid #d9d9d9;
            background-color: #fff !important;
            color: #595959 !important;
            height: 30px;
            line-height: 30px;
            border-radius: 30px;
            width: 100px;
            text-align: center;
            display: inline-block;
            font-weight: normal;
          }

          span:hover {
            cursor: pointer;
            border-color: #333;
          }
        }
      }
    }
  }

  .right {
    width: 21%;

    .banner {
      margin-bottom: 15px;

      img {
        width: 100%;
        height: 100%;
        border-radius: 10px;
      }
    }

    .el-card {
      height: 830px;
    }

    .news {
      .tab-list {
        div {
          width: 50%;
          text-align: center;
          color: #39393c;
          padding: 10px 0;
        }

        .item {
          background: #fff !important;
        }

        i {
          bottom: 15px !important;
        }

        div:first-child {
          border-right: 1px solid #ecebed;
        }

        div:hover {
          cursor: pointer;
        }
      }

      .news-list {
        height: 720px;
        overflow-y: auto;
        margin-top: 20px;

        .news-item {
          border-bottom: 1px solid #ebeef5;
          padding: 20px 10px;
          box-sizing: border-box;
          text-overflow: ellipsis;

          .item-title {
            font-size: 16px;
            width: 100%;
            color: #333336;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .item-time {
            font-size: 14px;
            color: #c1c4c7;
            width: 100%;
            margin-top: 20px;
          }
        }

        .news-item:hover {
          cursor: pointer;
          background: #F5F7FA !important;
        }

        .news-item:nth-child(even) {
          background: #fafafa;
        }
      }

      .news-list::-webkit-scrollbar {
        display: none;
      }
    }
  }
}
</style>

